<!-- 老虎机 -->
<template>
  <el-dialog v-if="show" :model-value="props.show"
    :title="GameName(indexStore.gameArray, props.checkedItem.game_id) + $t('381')" :close-on-click-modal="false"
    :close-on-press-escape="false" top="15vh" width="51%" @close="onHideDetails">
    <div class="dialogMaxHeight">
      <el-form ref="ruleFormRef" :model="data" :inline="true" :rules="rules" :class="props.isDisableUser ? 'disableUser' : ''">
        <form-item :title="t('41')" value="game_name">
          <div class="gameIcon">
            <div class="flex marginR5">
              <el-tag size="small">{{ GamePlatform(indexStore.gameArray, props.checkedItem.game_id) }}</el-tag>
              <img class="game-icon" :src="selectToLabel(GAMEICON, props.checkedItem.game_id)" alt="">
            </div>
            {{ GameName(indexStore.gameArray, props.checkedItem.game_id) }}
          </div>
        </form-item>
        <form-item :title="$t('375')" :pass="true" value="a_slots_backend_echo">
          <el-select v-model="data.a_slots_backend_echo" filterable>
            <el-option v-for="item in data.rtpList" :label="item + '%'" :value="item"
              v-show="item && item == 200 ? agentTypeShow : true" />
          </el-select>
          <span class="input-text">{{ $t('390') }}</span>
        </form-item>
        <!-- JILI游戏才显示 -->
        <form-item :title="$t('564')" value="a_slots_rtptype">
          <el-select v-model="data.a_slots_rtptype" :placeholder="$t('19') + $t('564')" filterable>
            <el-option v-for="item in RtpType" :label="item.label" :value="item.value"
              v-show="item.value < 4 ? true : false" />
          </el-select>
          <span class="tipsText"> ({{ t('762') }})</span>
        </form-item>
        <form-item :title="$t('391')" value="a_slots_auto" v-show="data.a_slots_auto != -1 ? true : false">
          <el-radio-group v-model="data.a_slots_auto" size="large">
            <el-radio-button :label="$t('101')" :value="0" />
            <el-radio-button :label="$t('102')" :value="1" />
          </el-radio-group>
          <div class="input-text">({{ $t('547') }})</div>
        </form-item>
        <form-item :title="$t('507')" :pass="true" value="a_slots_buy" v-if="data.a_slots_buy != -1">
          <el-radio-group v-model="data.a_slots_buy" size="large">
            <el-radio-button :label="$t('101')" :value="1" />
            <el-radio-button :label="$t('102')" :value="0" />
          </el-radio-group>
        </form-item>
        <form-item :title="$t('392')" :pass="true" value="a_slots_maxwin">
          <el-input-number :min="0"
            :max="selectToLabel(MaximumMultiple, data.game_id) ? selectToLabel(MaximumMultiple, data.game_id) : 500"
            :precision="0" v-model="data.a_slots_maxwin" :placeholder="$t('19') + $t('392')" clearable
            controls-position="right" />
          <span class="tipsText">*({{ $t('521') }} <span class="tipsTextRed"> 1 ~ {{ selectToLabel(MaximumMultiple,
            data.game_id) }}</span> ;{{ $t('522') }})</span>
        </form-item>
      </el-form>
      <form-item :title="$t('260')" value="a_slots_amount" :subtract="data.gameAmountShow" @addItem="addPressure">
        <p v-if="data.isMaintenance" class="tipsTextRed">*({{ $t('508') }})</p>
        <span class="input-text">({{ $t('549') }})</span>
        <div :class="(props.checkedItem.platform == '2' || props.checkedItem.platform == '4') ? 'flex amountBox' : ''">
            <div :class="props.checkedItem.platform == '3' ? 'flex' : ''" class=" margin5"
          v-for="(item, index) in data.pressureList" :key="index">
          <div class="flex marginR5">
            <el-input-number class="width200" :disabled="data.isMaintenance || isConditions" :min="0.001"
              :max="99999999999999999999" :precision="3" v-model="item.num" :placeholder="$t('551')" clearable
              controls-position="right" />
            <div v-show="data.gameAmountShow" class="reduce-btn reduce-btn_new marginL5" @click="reducePressure(index)">
              -</div>
          </div>
          <div class="box-item">
            <div v-for="(second, index) in data.otherLevel" :key="index">
              {{ item.num }} x {{ $t('475') + second }} x {{ $t('552') + data.otherLine }} x {{ $t('1007') +
                data.client_balance_scale }} =
              {{ $t('553') }} <span class="mustPass">{{ BigTimes(BigTimes(second, BigTimes(item.num,
                data.otherLine)), data.client_balance_scale) }}</span>
            </div>
          </div>
        </div>
    </div>
    </form-item>
    <form-item :title="t('798')" value="a_slots_defaultamount" v-if="props.checkedItem.platform != '3'">
      <div>
        <p class="flex">
          <span v-if="data.isMaintenance" class="tipsTextRed">*({{ $t('508') }})</span>
          <span class="tipsText">({{ $t('549') }})</span>
        </p>
        <div class="margin5" v-for="(item, index) in data.defaultList" :key="index">
          <div class="flex marginR5">
            {{ t('799') }}：<el-select class="marginR20" v-model="data.defaultList[0].num" :disabled="data.isMaintenance"
              :placeholder="t('799')" filterable>
              <el-option v-for="item in data.pressureList" :label="item.num" :value="item.num" />
            </el-select>
            {{ t('475') }}：<el-select v-model="data.defaultList[0].level" :disabled="data.isMaintenance"
              :placeholder="t('475')" filterable>
              <el-option v-for="item in data.otherLevel" :label="item" :value="item" />
            </el-select>
          </div>
          <div class="box-item">
            {{ data.defaultList[0].num }} x {{ $t('475') + data.defaultList[0].level }} x {{ $t('552') +
              data.defaultList[0].line }} x {{$t('1007') +  data.client_balance_scale }}=
            {{ $t('553') }} <span class="mustPass">{{ BigTimes(BigTimes(BigTimes(item.num, data.defaultList[0].line),data.defaultList[0].level),data.client_balance_scale) }}</span>
          </div>
        </div>
      </div>
    </form-item>
    </div>
    <div class="flexRightDetween marginT20" v-show="!props.isDisableUser">
      <div>
        <el-button type="info" @click="onHideDetails">{{ $t('240') }}</el-button>
        <el-button type="primary" @click="gameSet(ruleFormRef)">{{ $t('241') }}</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import FormItem from '@/components/FormItem/FormItem.vue'
import { BigWan, BigTimeWan, BigDiv, BigTimes } from '@/utils/math'
import { GAMEICON, RtpType } from '@/config/eunm'
import { throttle, selectToLabel, GamePlatform, GameName } from '@/utils/index'
import { getOperatorTiger, editTiger, getGameStatus } from '@/api/settion'
import { MaximumMultiple } from '@/views/users/components/gameFace'

import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { useStore } from '@/stores/index'
const indexStore = useStore()

const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  isDisableUser: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  checkedItem: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

watch(
  () => [props.checkedItem, props.show],
  async (value) => {
    if (value[0]) {
      Object.assign(data, props.checkedItem)
    }
    if (value[1]) {
      chooseOperator(props.checkedItem.agent_id, props.checkedItem.game_id) // 获取运营商配置
    }
  },
)

const agentTypeShow = JSON.parse(localStorage.getItem('userInfo') as string).agent_type ? true : false
var isConditions = false // 满足条件禁止

const data = reactive({
  id: 0,
  game_id: 0,
  game_name: '',
  a_slots_backend_echo: 0,
  a_slots_auto: 0,
  a_slots_rtptype: 0,
  a_slots_buy: 0,
  a_slots_maxwin: 0,
  pressureList: [{ num: 0.001 }],
  defaultList: [{ num: 0.001, line: 1, level: 1 }],
  otherBetOne: [],
  otherBetTwo: 0,
  rtpList: [],
  isMaintenance: false,
  otherLine: 0,
  otherLevel: [],
  gameAmountShow: false,
  client_balance_scale: 1,
})

// 游戏在维护状态下才能编辑
const getGameInfo = async (row: any) => {
  let res = await getGameStatus({
    agent_id: row.agent_id,
    game_id: row.game_id
  })
  if (res.data.status) {
    data.isMaintenance = true
  } else {
    data.isMaintenance = false
  }
  // 控制--投注按钮是否显示隐藏
  if (!data.isMaintenance && !props.isDisableUser && props.checkedItem.platform != '3') {
    data.gameAmountShow = true
  } else {
    data.gameAmountShow = false
  }
}

// 获取配置
const chooseOperator = async (id: number, game_id: number) => {
  let res = await getOperatorTiger({
    agent_id: id,
    game_id: game_id
  });
  res.data.isMaintenance = false
  if (res.data.game_id == 10223 || res.data.game_id == 10051) {
    isConditions = true
  } else {
    isConditions = false
  }
  // 处理压注缩小倍数
  res.data.defaultList.forEach((item:any)=> {
    item.num = BigDiv(item.num,data.client_balance_scale)
  })
  res.data.pressureList.forEach((item:any)=> {
    item.num = BigDiv(item.num,data.client_balance_scale)
  })
  Object.assign(data, res.data)
  getGameInfo(props.checkedItem)
}

// 设置
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<typeof data>>({
  game_name: [{ required: true, message: '请输入中文(Chinese)名称', trigger: 'blur' }],
  a_slots_maxwin: [{ required: true, message: t('19') + t('392'), trigger: 'blur' }],
})
const gameSet = throttle(async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (!checkAmount(data.defaultList[0].num) && props.checkedItem.platform != '3') {
        return ElMessage.error(t('800'))
      }
      // 处理压注缩小倍数
      data.defaultList.forEach((item:any)=> {
        item.num = BigTimes(item.num,data.client_balance_scale)
      })
      data.pressureList.forEach((item:any)=> {
        item.num = BigTimes(item.num,data.client_balance_scale)
      })
      await editTiger(data)
      ElMessage.success(t('54'))
      emit('onHideDetails', true)
    }
  })
}, 3000)

// 新增押注面额
const addPressure = async () => {
  if (data.pressureList.length > 14) {
    return ElMessage.error(t('473'))
  } else {
    data.pressureList.push({ num: 0.001 })
  }
}
// 减少押注面额
const reducePressure = async (index: number) => {
  if (!index && data.pressureList.length == 1) {
    return ElMessage.error(t('373'))
  }
  data.pressureList.splice(index, 1)
}

// 查询基础面额
const checkAmount = (num: number) => {
  if (data.pressureList.find((item: any) => item.num == num)) {
    return true
  } else {
    return false
  }
}

// 重置
const emit = defineEmits(['onHideDetails'])
const onHideDetails = () => {
  emit('onHideDetails', false)
}
</script>

<style scoped lang="scss">
.amountBox {
  overflow: auto;
  white-space: nowrap;

  /* 定义滚动条宽度和背景颜色 */
  &::-webkit-scrollbar {
    height: 6px;
    /* 定义滚动条宽度 */
  }

  .box-item {
    padding: 5px;
    background-color: #f8f8f8;
    border-radius: 5px;
  }
}
</style>